<template>
	<view class="card">
		<image v-if="showImage" class="card-img" src="../../static/images/homePage/semicircle.png" mode=""></image>
		<view class="card-title" v-if="showTitle">
			<view class="card-logo" :style="{ backgroundColor: props.logoColor }"></view>
			<slot name="header" style="">
				<!-- 这里是头部内容 -->
			</slot>
		</view>
		<slot name="default"></slot>
		<slot name="footer">
			<!-- 这里是尾部内容 -->
		</slot>
	</view>
</template>

<script setup>
const props = defineProps({
	logoColor: {
		type: String,
		required: false,
		default: '#5A4BFA'
	},
	showImage: Boolean,
	showTitle: {
		type: Boolean,
		required: false,
		default: true
	}
});
</script>

<style lang="scss">
.card {
	width: 100%;
	background: #ffffff;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	padding: 20rpx;
	box-sizing: border-box;
	margin-bottom: 20rpx;
	position: relative;

	&-title {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}

	&-logo {
		width: 8rpx;
		height: 28rpx;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin-right: 10rpx;
	}

	&-img {
		position: absolute;
		top: 0;
		right: 0;
		width: 242rpx;
		height: 170rpx;
	}
}
</style>
